<template>
  <div class="box">
    <h6>10月19日</h6>
    <div class="hengxian"></div>
    <div class="demo">
<div class="text" v-for="(v,i) in arr" :key="i">
         <div class="text-left">
             <img :src="v.img" alt="">
         </div>
         <div class="text-right">
             <h5>{{v.h5}}</h5>
             <p>{{v.p}}</p>
             <span>{{v.span}}</span>
         </div>
    </div>
    </div>
    
   
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[{img:"/soon/2.jpg",h5:"炉石传说",p:"更新",span:"全新模式【佣兵战纪】正式上线"},
            {img:"/soon/1.jpg",h5:"原神",p:"更新",span:"2.2版本「雾海悬谜境」，新角色托马，新岛屿鹤观"}
            ]
        }
    }
};
</script>

<style scoped>
.demo{
    margin-top: 0.2rem;
}
.box {
  width: 100%;
  padding: 0, 0.16rem;
}
.box h6 {
  font-size: 0.16rem;
  color: #1d2127;
  padding: 0.06rem 0.16rem;
}
.hengxian {
  width: 2.6639rem;
  height: 0.01rem;
  margin-left: 0.9rem;
  margin-top:-0.15rem ;
  background-color: #ebebec;
}
.text{
    width: 100%;
    height: 1.04rem;
    display: flex;
    justify-content:space-around;
    /* background-color: orange; */
    /* margin-top: 0.2rem; */
    /* margin-left: 0.12rem; */
}
.text-left{
    width: 1.42rem;
    height: 0.8rem;
    /* background-color: pink; */
    position: relative;
}
.text-right{
    width: 1.892rem;
    height: 0.8rem;
    /* background-color: red; */
}
.text-left img{
    width: 1.42rem;
    height: 0.8rem;
    position:absolute;
    top:0;
    left: 0.06rem;
    border-radius:3px;
}
.text-right h5{
    color: #1D2127;
    font-size: 0.16rem;
}
.text-right p{
    color: #15C5CE;
    font-size: 0.12rem;
    margin-top: 0.02rem;
}
.text-right span{
    display: block;
    color: #868C92;
    font-size: 0.12rem;
    margin-top: 0.02rem;

}
</style>